<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="index.css"/>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.css">
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.min.js"></script>
</head>
<body>
  <h1>Map texture on sphere</h1>
  <div id="ui" style="float: none; margin: 0"></div>
  <div>from:</div>
  <canvas width=600 height=300 id="map" style="border:1px solid"></canvas>
  <script type="module">
    import {
      CanvasTexture,
      LinearFilter,
      Mesh,
      PointLight,
      SphereGeometry,
      MeshStandardMaterial,
      ThreeUi
    } from './howto-bundle.js';


    const ui = new ThreeUi('ui');
    ui.camera.position.z = 4;
    const light = new PointLight();
    light.position.set(10, 10, 10);
    ui.scene.add(light);

    const texture = new CanvasTexture(document.getElementById('map'));
    texture.minFilter = LinearFilter;

    const radius = 1;
    const segmentSize = 40;
    const geometry = new SphereGeometry(radius, segmentSize, segmentSize / 2);
    const material = new MeshStandardMaterial({
      map: texture,
    });
    ui.scene.add(new Mesh(geometry, material));
  </script>
  <script>
    var res = (window.devicePixelRatio || (window.screen.deviceXDPI / window.screen.logicalXDPI)) > 1;
    if (res) {
      // retina, see https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio
      var canvas = document.getElementById('map');
      var r = 2;
      canvas.width *= r;
      canvas.height *= r;
      canvas.style.cssText += 'width:' + Math.round(canvas.width / r) + 'px;height:' + Math.round(canvas.height / r) + 'px';
    }

    var map = new maptalks.Map('map', {
      center: [0,0],
      zoom: 1,
      zoomControl : true, // ignored in a canvas container
      scaleControl : true, // ignored in a canvas container
      baseLayer: new maptalks.TileLayer('base', {
        urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
        subdomains: ['a','b','c','d'],
        attribution: '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>'
      })
    });
  </script>
</body>
</html>
